<template>
  <div>
    <head-nev msg="黑马优购" :backState="true"></head-nev>
    <van-notice-bar
      background="linear-gradient(to right, #C73420, skyblue)"
      color="black"
      text="南京黑马程序员项目实战答辩会 　　　　　　　南京黑马程序员项目实战答辩会　　　　　　　　　　　　　　　　　　　　　　　南京黑马程序员项目实战答辩会　　　　　　　　　　　　南京黑马程序员项目实战答辩会 　　　　　　　南京黑马程序员项目实战答辩会　　　　　　　　　　　　　　　　　　　　　　　南京黑马程序员项目实战答辩会"
      left-icon="volume-o"
    />
    <van-row class="touxiangd">
      <van-col span="10">
        <van-panel title="头像" status="设置">
          <div>
            <van-button size="small" type="primary" >登录</van-button>
            <van-button size="small" type="danger">注册</van-button>
          </div>
          <div slot="header">
            <van-image round width="80px" height="80px" src="/2.jpg" />
          </div>
        </van-panel>
      </van-col>
      <van-col span="14">
        <van-col span="10">
          <span class="lyf">欢迎李易峰</span>
        </van-col>
        <van-col span="1">
          <van-button size="small" type="info">设置</van-button>
        </van-col>
        <van-col span="1"></van-col>
      </van-col>
    </van-row>
    <van-row class="rorow">
      <van-col span="6">
        <van-row>--</van-row>
        <van-row>商品关注</van-row>
      </van-col>
      <van-col span="6">
        <van-row>--</van-row>
        <van-row>店铺关注</van-row>
      </van-col>
      <van-col span="6">
        <van-row>--</van-row>
        <van-row>喜欢的内容</van-row>
      </van-col>
      <van-col span="6">
        <van-row>--</van-row>
        <van-row>浏览记录</van-row>
      </van-col>
    </van-row>
    <van-grid>
      <van-grid-item icon="alipay" text="待付款" />
      <van-grid-item icon="logistics" text="待收货" />
      <van-grid-item icon="column" text="待评价" />
      <van-grid-item icon="balance-list-o" text="我的订单" />
    </van-grid>
    <van-row class="jindu">登录查看进度</van-row>
    <van-steps :active="active" style="color: red;">
      <van-step>买家下单</van-step>
      <van-step>商家接单</van-step>
      <van-step>买家提货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
    <!-- 优惠券 -->
    <van-coupon-cell
      title="可领取优惠券"
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />

    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        enabled-title="可领取优惠券"
        close-button-text="不领取优惠券"
        @exchange="onExchange"
      />
    </van-popup>

    <van-card
      num="1"
      tag="爆款"
      price="199"
      desc="去伊朗打AK的人都穿这个"
      title="战争T衫"
      thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
      origin-price="299.00"
    />
    <van-button type="primary" @click="wat" size="large">神秘推荐</van-button>
    <!-- <van-button type="primary" @click="wat">黑马优购</van-button>
    <van-button type="primary" @click="wat">精品优秀</van-button>
    <van-button type="primary" @click="wat">售后服务</van-button> -->

    <foot-nav></foot-nav>
  </div>
</template>

<script>
import Vue from 'vue'
import { ImagePreview } from 'vant'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
const coupon1 = {
  available: 2,
  condition: '无使用门槛\n最多优惠520元',
  reason: '',
  value: 5200,
  name: '优惠券名称',
  startAt: 1489104001,
  endAt: 151459200,
  valueDesc: '150',
  unitDesc: '元'
}
const coupon3 = {
  available: 3,
  condition: '无使用门槛\n最多优惠120元',
  reason: '',
  value: 20,
  name: '优惠券名称',
  startAt: 1489104001,
  endAt: 151459200,
  valueDesc: '10',
  unitDesc: '元'
}
export default {
  data() {
    return {
      active: 1,
      chosenCoupon: -1,
      coupons: [coupon, coupon1],
      disabledCoupons: [coupon3],
      showList: false,
      show: false,
      index: 0
    }
  },

  methods: {
    onChange(index) {
      this.showList = !this.showList
      this.chosenCoupon = index
    },
    onExchange(code) {
      this.coupons.push(coupon)
    },
    wat() {
      ImagePreview([
        'https://fanhc.xyz/pyg/banner1.png',
        '/1.jpg'
      ])
    },
    onChangePic(index) {
      this.index = index
    }
  },

}
</script>

<style lang="less" scoped>
// .touxiangd {
//   // background-color: blue;
// }
.van-nav-bar {
  margin-bottom: 150px;
}
.van-image {
  left: 20px;
}
.rorow,
.van-grid {
  font-size: 16px;
  text-align: center;
  color: #003;
}
.jindu {
  font-size: 16px;
}
.lyf {
  font-size: 15px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>